import React, { Component } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import { Modal } from 'antd';
import { ImageDrop } from 'quill-image-drop-module';
import 'react-quill/dist/quill.snow.css';
import PicUpload from '@/components/FileUpload';

Quill.register('modules/imageDrop', ImageDrop);

interface BaseProps {
  onChange: (url: string) => void;
}

interface BaseData {
  uploadBoxVisible: boolean;
  value: any;
}

class Editer extends Component<BaseProps, BaseData> {
  constructor(props: any) {
    super(props);
    this.state = {
      uploadBoxVisible: false,
      value: null,
    };
    this.handleChange = this.handleChange.bind(this);
    this.imageHandler = this.imageHandler.bind(this);
    this.showUploadBox = this.showUploadBox.bind(this);
  }

  handleChange(value: string) {
    const { onChange } = this.props;
    onChange(value);
  }

  // 富文本配置
  modules = {
    toolbar: {
      container: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        ['blockquote', 'code-block'],
        [{ script: 'sub' }, { script: 'super' }],
        [{ indent: '-1' }, { indent: '+1' }],
        [{ direction: 'rtl' }],
        [{ size: ['small', false, 'large', 'huge'] }],
        [
          { list: 'ordered' },
          { list: 'bullet' },
          { indent: '-1' },
          { indent: '+1' },
          { align: [] },
        ],
        [{ color: [] }, { background: [] }],
        [{ font: [] }],
        [{ align: [] }],
        ['link', 'image', 'video'],
        ['clean'],
      ],
      handlers: {
        image: this.showUploadBox.bind(this),
      },
    },
    imageDrop: true,
  };

  showUploadBox() {
    this.setState({
      uploadBoxVisible: true,
    });
  }

  hideUploadBox = () => this.setState({ uploadBoxVisible: false });

  // 处理图片插入
  imageHandler(url: string) {
    if (typeof this.reactQuillRef.getEditor !== 'function') return;
    const quill = this.reactQuillRef.getEditor();
    const range = quill.getSelection();
    const index = range ? range.index : 0;
    quill.insertEmbed(index, 'image', url, Quill.sources.USER); // 插入图片
    quill.setSelection(index + 1); // 光标位置加1
  }

  static getDerivedStateFromProps(nextProps: any, prevState: any) {
    if (nextProps.value && nextProps.value !== prevState.value) {
      return {
        value: nextProps.value,
      };
    }
    return null;
  }

  render() {
    const { uploadBoxVisible, value } = this.state;
    const picProps = {
      onChange: (url: string) => {
        this.imageHandler(url);
        this.hideUploadBox();
      },
    };

    return (
      <div style={{ maxHeight: '500px' }}>
        <ReactQuill
          id="ddd"
          ref={(el: any) => {
            this.reactQuillRef = el;
          }}
          value={value}
          onChange={this.handleChange}
          theme="snow"
          modules={this.modules}
          style={{ height: 300 }}
        />
        <Modal title="上传图片" onCancel={this.hideUploadBox} visible={uploadBoxVisible}>
          <div className="ImagaBox">
            <PicUpload {...picProps} />
          </div>
        </Modal>
      </div>
    );
  }
}

export default Editer;
